<template>

  <div class="shopsDetail">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/customs' }">客户列表</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isEdit">查看客户 #{{id}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>客户获取错误</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">



      <h2>{{form.name}}</h2>
      <h3>{{form.phone}}</h3>
      <p>线索生成: {{form.create_time}}</p>
      <p><span>顾问电话</span> {{form.sales_phone}}</p>
      <p><span>意向车型</span> {{form.model_name}}</p>
      <p><span>客户需求</span> {{form.demand}}</p>
      <!--<el-button type="success" :loading="vm.assigning" @click="dialogVisible = true">指派销售人员</el-button>-->
      <el-button type="danger" :loading="vm.closing" @click="close">关闭线索</el-button>
      <el-dialog :visible.sync="dialogVisible">

        <mt-dialog :items="sales" name="username" @change="changSales"></mt-dialog>

        <div slot="footer" class="dialog-footer">


          <el-button size="small"  @click="assign" type="success">指派</el-button>

          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>





    </div>
    <div class="mt-cell" style="border-radius: 10px">
      <h2>跟进记录</h2>
      <div class="commit" v-for="item in follow_up_records">
        <div class="user-name">{{item.name}} <el-tag size="mini" type="success" v-if="item.intention_leve">{{item.intention_level}}</el-tag> </div>
        <div class="user-message">{{item.message}}</div>
      </div>
    </div>

  </div>
</template>
<style scoped>
  .mt-cell .commit{
    margin-top: 30px;
  }
  .mt-cell .commit .user-message{
    padding: 10px;
    background: #fff;
    margin: 20px 0;
  }
</style>
<script>
  import * as Customs from "@/api/customs";
  import * as Staff from "@/api/staff";
  import mtDialog from '@/components/DialogPicker'

  export default {
    computed: {},

    components: {
      mtDialog
    },
    data() {
      return {
        vm: {
          isEdit: false,
          message: "",
        },
        sid:-1,
        form: {},
        follow_up_records:{},
        sales:[],
        dialogVisible:false
      };
    },

    mounted() {
      var that=this;
      if (this.$route.params.id > 0) {
        this.vm.isEdit = true;
        this.id = this.$route.params.id;
      }

      this.query();

      // Customs.query().then(function(res){
      //   that.shops=res.pass_list;
      // })

    },
    methods: {
      changSales:function(e){
        this.sid=e;
      },
      query(){
        var that =this;

        Customs.getQuery({id:that.id}).then(function(res){
          that.form=res.thread_info;
          that.follow_up_records=res.follow_up_records;
          that.sales_id=res.thread_info.sales_id;
          // Staff.query({shop_id:res.thread_info.shop_id}).then(function(res){
          //   that.sales=res.models;
          // })
        })
      },
      assign:function(){
        var that=this;
        var _q={};
        _q.target_sales_id=that.sid;

        _q.thread_id=that.id;
//
//
//        {
//          "token":"",
//          "staff_id":"",
//          "thread_id":"",
//          "origin_sales_id":"",
//          "target_sales_id":""
//        }
        Customs.assign(_q).then(function(res){
          that.dialogVisible=false;
          that.$message({
            message: '指派成功,刷新页面中',
            type: 'success'
          });

          that.query()
        }).catch(function(message){
          that.$message({
            message: message,
            type: 'warning'
          });
        })

      },
      close() {
        var that=this;
        var _q={};

        _q.thread_ids=[that.id];

        Customs.close(_q).then(function(res) {
          console.log(res);
        });
      },
      add() {
        var that = this;
        Customs.add(that.form).then(function(res) {
          console.log(res);
        });
      },
      update() {
        var that = this;
        Customs.update(that.form).then(function(res) {
          console.log(res);
        });
      },


    }
  };
</script>
